<template>
  <div style="margin-top: 30px">
    <el-row :gutter="40">
    <el-col :span="10">
        <div class="cover">
            <img :src="list.coverImgUrl" alt="">
        </div>
    </el-col>
    <el-col :span="10">
        <div class="text">
            <h3>{{list.name}}</h3>
            <div class="image">
                <img v-if="list.creator!==undefined" :src="list.creator.avatarUrl" alt="">
                <div class="p"><p v-if="list.creator!==undefined">{{list.creator.nickname}}/<span>{{list.createTime}}</span></p></div>
            </div>
            <el-button type="warning" style="margin-bottom: 15px">
                <i class="el-icon-video-play" style="color: #fff;margin-right: 3px"></i>播放全部
            </el-button>
            <div class="tag">
                <ul>标签:<li v-for="i,index in list.tags" :key="index">{{i}}/</li></ul>
            </div>
            <div class="descrip">
                <h5>简介：</h5>
                <div>
                    <p>{{list.description}}</p>
                </div>
            </div>
        </div>
    </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲" name="歌曲">
          <el-table
          :data="list.tracks"
          style="width: 100%"
          @row-dblclick="goTo"
          >
          <el-table-column
            type="index"
            width="80">
          </el-table-column>
          <el-table-column
            label="歌名"
            width="260"
            >
            <template slot-scope="scope">
              <p>{{scope.row.name}}<i v-if="scope.row.mvid!=0" class="el-icon-video-camera"></i></p>
              <span style="font-size: 12px;color: gray;">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="歌手"
            width="180">
            <template slot-scope="scope">
              <span>{{scope.row.ar[0].name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="专辑"
            width="260">
            <template slot-scope="scope">
              <span>{{scope.row.al.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="时长"
            width="180">
            <template slot-scope="scope">
              <span>{{scope.row.dt}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="height:100px;margin: 20px;">暂时只有这些咯~~</div>
        </el-tab-pane>
        <el-tab-pane label="评论" name="评论">
          <div class="comment">
            <h3>精彩评论({{hots}})</h3>
            <span class="num"></span>
            <div class="item" v-for="item in hotComment" :key="item.id">
                <img :src="item.user.avatarUrl" alt="">
                <div class="talk">
                    <span style="color: blue">{{item.user.nickname}}: </span>
                    <span style="display:inline;">{{item.content}}</span>
                </div>
                <div v-if="item.beReplied.length!=0" class="reply" style="background: gray">
                    <span style="color: blue;margin-left: 20px;">{{item.beReplied[0].user.nickname}}: </span>
                    <span style="display:inline;">{{item.beReplied[0].content}}</span>
                </div>
            </div>
            <h3>最新评论({{Math.trunc(total)}})</h3>
            <span class="num"></span>
            <div class="item" v-for="i in newComment" :key="i.id">
                <img :src="i.user.avatarUrl" alt="">
                <div class="talk">
                    <span style="color: blue">{{i.user.nickname}}: </span>
                    <span style="display:inline;">{{i.content}}</span>
                </div>
                <div v-if="i.beReplied.length!=0" class="reply" style="background: gray">
                    <span style="color: blue;margin-left: 20px;">{{i.beReplied[0].user.nickname}}: </span>
                    <span style="display:inline;">{{i.beReplied[0].content}}</span>
                </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
      v-if="activeName==='评论'"
      @current-change="handlePage"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="5"
        >
        </el-pagination>
  </div>
</template>

<script>
export default {
    name: 'PlayList',
    data(){
        return{
            list: [],
            activeName: '歌曲',
            // 热门评论
            hotComment: [],
            // 最新评论
            newComment: [],
            hots: 1,
            total: 0,
            page: 1,
            dt: ''
        }
    },
    created(){
        this.$axios({
            url: '/playlist/detail',
            method: 'get',
            params: {
                id: this.$route.query.q
            }
        }).then(res=>{
            this.list = res.data.playlist
            console.log(this.list)
            for(let i=0;i<this.list.tracks.length;i++){
                // 获取总时长(毫秒)
                let min = parseInt(this.list.tracks[i].dt/1000/60)
                min = (min<10?'0'+min:min)
                let sec = parseInt(this.list.tracks[i].dt/1000%60)
                sec = (sec<10?'0'+sec:sec)
                this.list.tracks[i].dt = min+':'+sec
                // console.log('dt',this.list.tracks[i].dt);
            }
        })
        // 热评
        this.$axios({
            url: '/comment/hot',
            method: 'get',
            params: {
                id: this.$route.query.q,
                type: 2
            }
        }).then(res=>{
            // console.log('111',res.data)
            this.hotComment = res.data.hotComments
            // 评论个数
            this.hots = res.data.total
        })
        // 总评
        this.$axios({
            url: '/comment/playlist',
            method: 'get',
            params: {
                id: this.$route.query.q,
                limit: 10,
                offset: (this.page-1)*10
            }
        }).then(res=>{
            console.log('111',res.data)
            this.newComment = res.data.comments
            // 总评论个数
            this.total = (res.data.total/2)
        })
    },
    methods: {
        handleClick(){
            this.page = 1
        },
        goTo(row){
            console.log(row)
            this.$axios({
            url: '/song/url',
            method: 'get',
            params: { id: row.id }
            }).then(res=>{
            console.log(res.data.data[0].url)
            if(res.data.data[0].url){
                this.$bus.$emit('music',res.data.data[0].url)
            }else{
                this.$message.info('暂无播放源')
            }
            })
        },
        handlePage(val){
            // 获取当前页码
            this.page = val
            // 重新获取数据
            // 歌单列表
            this.$axios({
                url: '/comment/playlist',
                method: 'get',
                params: {
                    id: this.$route.query.q,
                    limit: 10,
                    offset: (this.page-1)*10
                }
            }).then(res=>{
                // console.log('111',res.data)
                this.newComment = res.data.comments
                // 总评论个数
                this.total = (res.data.total/2)

            })
        }
        
    }
}
</script>

<style lang="less" scoped>
img{
    display: block;
    width: 100%;
}
.cover{
    img{
        width: 60%;
        margin-left: 30%;
    }
}
.text{
    .image{
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-bottom: 15px;
        img{
            border-radius: 50%;
        }
        .p{
            position: absolute;
            top: 10px;
            left: 90px;
            p{
                font-weight: bold;
                span{
                    margin-left: 20px;
                    font-weight: normal;
                    font-size: 12px;
                }
            }
        }
    }
    .tag{
        ul{
            display: flex;
            justify-content: flex-start;
            font-weight: bold;
            font-size: 14px;
            li:first-child{
                margin-left: 30px;
            }
            li{
                list-style: none;
                margin-right: 5px;
                font-weight: normal;
            }
        }
    }
    .descrip{
        div{
            width: 100%;
            height: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 作为弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
            -webkit-box-orient: vertical;
            /* 显示的行 */
            -webkit-line-clamp: 4;
            p{
                font-size: 16px;
                display: inline;
            }
        }
    }
}
.el-table-column{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    img{
        display: block;
        width: 50%;
        height: 30%;
    }
    .el-table__cell{
        position: relative;
    }
    .el-icon-video-play{
    position: absolute;
    top: 18px;
    left: 18px;
    opacity: 0;
    font-size: 25px;
    border-radius: 50%;
    }
    .el-icon-video-play:hover{
    opacity: 1;
    position: absolute;
    top: 25px;
    left: 25px;
    color: red;
    background-color: #ccc;
    cursor: pointer;
    }
}
.item{
    position: relative;
    margin: 10px auto;
    img{
        width: 4%;
        border-radius: 50%;
        margin: 20px;
    }
    .talk{
        width: 80%;
        position: absolute;
        top: 5%;
        left: 10%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .reply{
        width: 90%;
        margin-left: 10%;
        margin-top: 10px;
        border-radius: 10px;
    }
}
.el-pagination{
    margin-left: 30%;
    margin-bottom: 100px;
}
</style>